<template>
  <!-- 添加绑定 -->
  <div class="addBind">
    <el-row>
      <!-- 左边 -->
      <el-col :span="rightContent ? 17 : 24" class="leftContent">
        <el-container>
          <el-header>
            <p class="fontTitle">表卡选择-用水区域</p>
            <!-- 点击侧边框 -->
            <el-button type="primary" class="rightIcon" @click="rightContent = !rightContent" v-if="!rightContent" style="backgroundcolor: #0b9ac3 !important">
              <i scope="icon" :class="
                                    rightContent
                                        ? 'el-icon-caret-right'
                                        : 'el-icon-caret-left'
                                " style="width: 9px; height: 12px"></i>
            </el-button>
            <!-- 搜索框-->
            <div class="searchArea">
              <!-- {{searchOptionTable}} -->
              <!-- {{222}} -->
              <!-- {{searchOptionTableQ}} -->
              <searchComponents :searchData="searchData" :searchOptionTable="searchOptionTable" @searchCallBack="searchCallBack" ref="searchComponents" style="margintop: 16px"></searchComponents>
              <div>
                <el-button type="primary" size="mini" @click="sunS_F" style="backgroundcolor: #0b9ac3 !important">查询</el-button>
              </div>
            </div>
          </el-header>
          <el-main>
            <!-- <div>{{dataAttribute}}</div> -->
            <el-table ref="multipleTable" :data="dataAttribute" v-loading.body="false" row-key="id" border fit highlight-current-row size="mini" :tree-props="{
                                children: 'children',
                                hasChildren: 'hasChildren',
                            }" :cell-style="{ padding: '5px 0' }" @selection-change="handleSelectionChange" @row-click="rowClickType">
              <!-- <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="55"></el-table-column> -->
              <el-table-column align="center" :show-overflow-tooltip="true" type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column :prop="item.EN" align="center" v-for="item in searchData" v-if="item.tableSign" :key="item.id" :label="item.CN" :show-overflow-tooltip="true">
                <template slot-scope="scope">{{
                                    item.type === "select"
                                        ? optionDatas(
                                              item.typeGroupCode
                                                  ? optionsZi[item.EN]
                                                  : searchOptionTable[item.EN],
                                              scope.row[item.EN]
                                          )
                                        : scope.row[item.EN]
                                }}</template>
                <!-- <template slot-scope="scope">{{scope.row[item.EN]}}</template> -->
              </el-table-column>
            </el-table>
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="pagetotal"></el-pagination>
            <div>
              <el-button type="primary" size="mini" @click="allSelect" style="
                                backgroundcolor: #0b9ac3 !important;
                                float: right;
                            ">全选</el-button>
              <el-button type="primary" size="mini" @click="cancelAllSelect" style="
                                backgroundcolor: #0b9ac3 !important;
                                float: right;
                                margin-right: 10px;
                            ">清空</el-button>
            </div>
          </el-main>
        </el-container>
      </el-col>
      <!-- 右边 -->
      <el-col :span="rightContent ? 7 : 0" class="rightContent" v-if="rightContent">
        <el-container>
          <el-header height="30px">
            <p v-if="rightContent">小区管理-表卡绑定</p>
            <el-button type="primary" class="rightIcon" @click="rightContent = !rightContent" style="
                                margin-left: 16px;
                                backgroundcolor: #0b9ac3 !important;
                            " v-if="rightContent">
              <i scope="icon" :class="
                                    rightContent
                                        ? 'el-icon-caret-right'
                                        : 'el-icon-caret-left'
                                "></i>
            </el-button>
          </el-header>
          <el-main>
            <!-- <div>{{bindData}}</div> -->
            <!-- :data="stayBinding" -->
            <el-table ref="multipleTable" :data="stayBinding" v-loading.body="false" row-key="id" border fit highlight-current-row size="mini" :cell-style="{ padding: '5px 0' }" @selection-change="handleSelectionChange">
              <el-table-column align="center" :show-overflow-tooltip="true" type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column :prop="item.EN" align="center" v-for="item in bindData" v-if="item.tableSign" :key="item.id" :label="item.CN" :show-overflow-tooltip="true">
                <template slot-scope="scope">{{
                                    scope.row[item.EN]
                                }}</template>
                <!-- <template slot-scope="scope">{{scope.row[item.EN]}}</template> -->
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <!-- 删除按钮 -->
                  <el-button style="
                                            color: #c90010;
                                            border: none;
                                            fontsezi: 40px;
                                        " icon="el-icon-delete" circle @click="deleteList(scope.row.id)"></el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
    <template style="float: right; padding-bottom: 20px">

      <el-button size="mini" @click="closeBing" style="float: right; margin-left: 10px; margin-bottom: 20px">取 消</el-button>
      <el-button type="primary" size="mini" @click="addBing" style="float: right; margin-bottom: 20px">绑 定</el-button>
    </template>
  </div>
</template>
<script>
//引入修改组件
import modificationi from '@/views/components/FLPage/modificationi'
//引入查看组件
import examine from '@/views/components/FLPage/examine'
//引入搜索组件
import searchComponents from '@/views/components/FLPage/searchComponents'
// 引入导出组件
import exportXlsx from '@/views/components/FLPage/exportXlsx'
import {
  addFlCommunity, //增加
  deleteFlCommunity, //删除
  searchFlCommunity, //分页查询
  modifyFlCommunity, //修改
  getFlCommunity, //根据ID获取
  exprotXls, //导出
  getTree, //区域树
  findUnbindingWaterMeter, //获取未绑定小区的水表
} from '@/api/baseManage/flScheduleCommunity/index'
export default {
  name: 'addBind',
  data() {
    return {
      searchOptionTableQ: {},
      kaiguan: true,
      //搜索框
      suoS: {},
      //瀑布数据
      //   搜索组件的数据
      searchData: [
        {
          EN: 'id',
          CN: '',
          value: '',
          type: 'input',
          option: [],
          Exp: '',
          err: '',
          result: true,
          sign: false,
          searchSign: false,
          addSign: false,
          tableSign: false,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
        },
        {
          EN: 'waterNo',
          CN: '表卡编号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'setupAddress',
          CN: '安装位置',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'book',
          CN: '手册',
          value: '',
          type: 'select',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          dictTable: {
            table: 'fl_book',
            id: 'id',
            name: 'name',
          },
          result: true,
          sign: true,
          searchSign: true,
          addSign: false,
          tableSign: true,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
          configurationSign: false,
        },
        {
          EN: 'codeFactory',
          CN: '水表品牌',
          value: '',
          type: 'select',
          option: [],
          Exp: '^.{3,20}$',
          err: '长度为3-20的所有字符!',
          dictTable: {
            table: 'fl_factory',
            id: 'id',
            name: 'name',
            associated: 'status%3D1',
          },
          result: true,
          sign: true,
          searchSign: true,
          addSign: false,
          tableSign: true,
          examineSign: false,
          examineDisabled: false,
          modificationSign: false,
          configurationSign: false,
        },
      ],
      // 小区管理 表卡绑定数据
      bindData: [
        {
          EN: 'waterNo',
          CN: '表卡编号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'name',
          CN: '表卡名称',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
      ],
      // 表卡选择 用水区域数据
      chooseBiao: [
        {
          EN: 'name',
          CN: '表卡编号',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'name',
          CN: '表卡名称',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
        {
          EN: 'name',
          CN: '安装位置',
          value: '',
          type: 'input',
          option: [],
          Exp: '^.{3,20}$',
          err: '·长度为3-20的所有字符!',
          result: true,
          sign: true,
          searchSign: true,
          addSign: true,
          tableSign: true,
          examineSign: true,
          examineDisabled: false,
          modificationSign: true,
        },
      ],
      //添加弹窗的数据模型
      diaDataAdd: {
        yyqName: '',
        pqName: '',
        pqNum: '',
        BH: '',
      },
      //删除----Start----------------------------------------
      deleteDataList: [],
      //删除----End----------------------------------------

      //查看----Start----------------------------------------
      //查看的弹窗控制器
      DialogVisibleExamine: false,
      //查看的数据
      examineData: {},
      //查看----End----------------------------------------
      //表格数据
      //后端传来的数据
      dataAttribute: [],
      //表格选中
      multipleSelection: [],
      // 控制右侧是否显示
      rightContent: true,
      // 分页
      currentPage: 1, //当前页
      pagesize: 10, //每页条数
      pagetotal: 0, //总条数
      // 小区管理待绑定表卡数据
      stayBinding: [],
    }
  },
  props: ['searchOptionTable'],
  computed: {
    optionDatas() {
      return function (arr, val) {
        if (arr) {
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].value == val) {
              return arr[i].label
            }
          }
        }
      }
    },
  },
  created() {
    this.forData()
    //  this.forData(this.currentPage, this.pagesize);
  },
  methods: {
    allSelect() {
      console.log(this.stayBinding, 999)
      console.log(this.dataAttribute, 999)
      this.stayBinding = this.dataAttribute
    },
    // 清空
    cancelAllSelect() {
      let { searchData } = this
      searchData.forEach((item) => {
        item.value = ''
      })
      this.$nextTick(() => {
        this.$refs.searchComponents.newData = searchData
      })

      Object.keys(this.suoS).forEach((item) => {
        this.suoS[item] = ''
      })
      this.currentPage = 1
      this.pagesize = 10
      this.forData((this.suoS = {}))
    },
    addBing() {
      this.$emit('addMessage', '绑定', this.stayBinding)
      this.stayBinding = []
    },
    closeBing() {
      this.$emit('closeMessage', '取消')
      this.stayBinding = []
    },
    // handel
    //查询
    sunS_F() {
      this.currentPage = 1
      this.pagesize = 10
      this.forData(this.suoS) //刷新列表
    },
    //查询组件回调
    searchCallBack(newData) {
      console.log(newData)
      //组装数据（newData是个数组）

      let obj = {}
      for (let i = 0; i < newData.length; i++) {
        obj[newData[i].EN] = newData[i].value
      }
      // console.log(obj)
      this.suoS = obj
      console.log(this.suoS, '搜索条件。。。。')
      // console.log(this.suoS+'ceshi');
    },
    //渲染数据初始
    forData(searchData) {
      let { currentPage, pagesize } = this
      findUnbindingWaterMeter(currentPage, pagesize, searchData).then(
        (response) => {
          this.pagetotal = response.data.total
          this.dataAttribute = response.data.list
          console.log(this.dataAttribute, '列表')
        }
      )
    },
    // 区域树渲染
    // forData(){
    //   findUnbindingWaterMeter(page,size).then(res =>{
    //     this.dataAttribute = res.data;
    //   })
    // },

    //添加用户--新增表单组件传来的参数
    toAdd(addData) {
      console.log(addData)
      let obj = {}
      for (let i = 0; i < addData.length; i++) {
        obj[addData[i].EN] = addData[i].value
      }
      console.log(obj)
      addFlCommunity(obj).then((response) => {
        // this.forData(this.suoS,this.currentPage, this.pagesize); //刷新列表
        this.forData(this.suoS) //刷新列表
      })
    },

    //按钮栏传递了删除命令
    toDelete(orderstring) {
      this.$confirm('确认删除？')
        .then((_) => {
          let idArr = []
          for (let i = 0; i < this.deleteDataList.length; i++) {
            idArr.push(this.deleteDataList[i].id)
          }
          if (idArr.length == 0) {
            alert('请选择要删除的数据！')
            return
          }
          deleteFlCommunity(idArr)
            .then((response) => {
              this.forData(this.suoS) //刷新列表
              // this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
            })
            .catch((error) => {
              alert('删除失败！')
            })
        })
        .catch((_) => {})
    },

    //单项删除
    deleteList(id) {
      console.log(id)
      let arrId = [id]
      this.$confirm('确认删除？')
        .then((_) => {
          // ----------------
          var arr = []
          arr = this.stayBinding.filter((item) => {
            console.log(item.id, id)
            if (item.id != id) {
              return item
            }
            // return item.id == id
          })
          console.log(this.stayBinding, '666989')
          console.log(arr, '6669222289')
          this.stayBinding = arr

          // let a = this.stayBinding.indeOf(id)
          // console.log(a);

          // deleteFlCommunity(arrId).then(response => {
          //   this.forData(); //刷新列表
          //   // this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
          // });
          // done();
        })
        .catch((_) => {})
    },

    //查看
    makeExaId(id) {
      getFlCommunity(id)
        .then((response) => {
          let copyDialog = true
          this.DialogVisibleExamine = copyDialog
          // console.log(response)
          this.examineData = response.data
        })
        .catch((error) => {
          alert('获取失败')
        })
    },
    //查看关闭弹窗
    examineDialog(dialogVisibleMod) {
      this.DialogVisibleExamine = false
    },
    // 当表格的某一行被点击的时候触发   **************
    rowClickType(row) {
      console.log(row)

      this.kaiguan = true
      this.rightContent = true
      if (this.stayBinding.length === 0) {
        this.kaiguan = false
        this.stayBinding.push(row)
      } else {
        let stayBinding = this.stayBinding
        console.log(stayBinding, 333)
        for (let i = 0; i < stayBinding.length; i++) {
          const element = stayBinding[i]
          console.log(element.waterNo, row.waterNo, 323)
          if (element.waterNo === row.waterNo) {
            this.kaiguan = false
            return
          } else {
          }
        }
      }
      if (this.kaiguan) {
        console.log(this.kaiguan, 1)
        this.stayBinding.push(row)
        this.kaiguan = false
        console.log(this.kaiguan, 2)
      }
      // this.kaiguan = true
      console.log(this.stayBinding, 'ceshi')
    },

    //修改
    // modifyData(value, modData) {
    //   console.log(value,modData)

    //   if (value === true) {
    //     modifyFlCommunity(modData.id, modData)
    //       .then(response => {
    //         console.log(response);
    //         this.forData(); //刷新列表
    //         // this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
    //       })
    //       .catch(error => {
    //         alert("修改失败");
    //         this.forData(); //刷新列表
    //         // this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
    //       });
    //   } else {
    //     this.forData(); //刷新列表
    //     // this.forData(this.currentPage, this.pagesize, this.suoS); //刷新列表
    //   }
    // },

    //表格选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      //传递删除的参数
      this.deleteDataList = val
    },

    //分页
    handleSizeChange(val) {
      console.log('每页 ' + val + ' 条')
      this.pagesize = val
      this.forData(this.suoS)
    },
    handleCurrentChange(val) {
      console.log('当前页: ' + val)
      this.currentPage = val
      // this.forData(val, this.pagesize, this.suoS);
      this.forData(this.suoS)
    },
    // 导出Xlsx
    exprotXlsx: exprotXls,
  },
  components: {
    modificationi,
    examine,
    searchComponents,
    exportXlsx,
  },
  watch: {
    stayBinding(newValue, oldValue) {
      this.stayBinding = newValue
    },
    searchOptionTable(newValue) {
      this.searchOptionTableQ = newValue
    },
  },
}
</script>
<style scoped src="@/styles/allCss.css"></style>
<style lang="scss" scoped>
.addBind {
  /deep/ .el-table--mini {
    .gutter {
      display: table-cell !important;
    }
  }
  /deep/.el-main {
    padding: 0 !important;
  }
  /deep/.el-header {
    height: auto !important;
    padding: 0 0px !important;
    p {
      margin: 0px;
    }
  }
  .searchArea {
    display: flex;
    padding: 0;
    margin: 22px 0px 15px;
    // flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .out {
      padding: 0;
      // width: 500px;
      display: flex;
      justify-content: start;
      flex-wrap: nowrap;
      .inner {
        padding: 0 !important;
        .inp {
          .font {
            font-size: 12px;
          }
        }
      }
    }
  }
  .rightIcon {
    float: right;
    height: 28px;
    width: 28px;
    padding: 0;
    margin-top: 22px;
    .el-icon-caret-left {
      display: inline-block;
      height: 28px;
      width: 28px;
      line-height: 28px;
      text-align: center;
    }
    // i{
    //   width: 10px;
    //   height: 10px;
    // }
  }
  .right_row {
    display: flex;
    justify-content: start;
    align-items: center;
  }
  .do {
    display: flex;
  }
  .pagination {
    margin-top: 20px;
    text-align: left;
  }
  /deep/.el-row {
    .leftContent {
      padding-right: 30px !important;
      .el-container {
        .el-header {
          .searchArea {
            .out {
              padding: 0 !important;
              .inner {
                width: 33.33% !important;
                padding: 0px !important;
                .searchOne {
                  margin: 0px 23px 0px 0px !important;
                  .font {
                    // width: 56px !important;
                  }
                  .el-input {
                    .el-input__inner {
                      height: 29px !important;
                    }
                  }
                }
              }
            }
          }
        }
        /deep/.el-main {
          padding: 0px;
          .el-table {
            .el-table__body-wrapper {
              .el-table__body {
                tbody {
                  .el-table__row {
                    height: 36px !important;
                  }
                }
              }
            }
          }
        }
      }
    }
    .rightContent {
      .el-container {
        .el-main {
          padding-top: 18px !important;
          padding-left: 0px !important;
          padding-right: 0px !important;
        }
      }
    }
  }
  .fontTitle {
  }
}
</style>
